<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				perspective: 1000px;
			}
			
			.big {
				perspective: 350px;
			}
			
			.box3 {
				position: relative;
				width: 200px;
				height: 200px;
				margin: 50px auto;
				transition: all 0.6s;
				backface-visibility: hidden;
			}
			
			.box3:hover {
				transform: rotateY(180deg);
			}
			
			.front,.back {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				line-height: 200px;
				color: white;
				text-align: center;
				border-radius: 50%;
				font-size: 18px;
			}
			
			.front {
				background-color: pink;
				z-index: 1;
			}
			
			.back {
				background-color: purple;
				transform: rotateY(180deg);
			}
			
			/* ---------------------------- */
			.box {
				margin-bottom: 50px;
			}
			
			.box li {
				position: relative;
				width: 150px;
				height: 50px;
				float: left;
				list-style: none;
				margin-right: 5px;
				line-height: 50px;
				text-align: center;
				transform-style: preserve-3d;
				transition: all 0.4s;
			}
			
			.box li .pink,.box li .purple {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			
			.box li .pink {
				background-color: pink;
				z-index: 1;
				transform: translateZ(25px);
			}
			
			.box li .purple {
				background-color: purple;
				transform: translateY(50%) rotateX(-90deg);
				color: white;
			}
			
			.box li:hover {
				transform: rotateX(90deg);
			}
			
			/* --------------------------- */
			section {
				position: relative;
				width: 300px;
				height: 200px;
				margin: 300px auto;
				transform-style: preserve-3d;
				animation: rotate 10s linear infinite;
				background: url(img/48f75d9c3e2b404097de20bae3023517~tplv-tt-cs0_583_410.jpg) no-repeat;
				background-size: 100% 100%;
			}
			
			section:hover {
				animation-play-state: paused;
			}
			
			section div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(img/c32c96d932536487152fa673e5d1366ee766a4503404a-c8ByXD_fw658webp.webp.jpg) no-repeat;
				background-size: 100% 100%;
			}
			
			section div:nth-child(1) {
				transform: translateZ(300px);
			}
			
			section div:nth-child(2) {
				/* 先旋转好了再移动 */
				transform: rotateY(60deg) translateZ(300px);
			}
			
			section div:nth-child(3) {
				transform: rotateY(120deg) translateZ(300px);
			}
			
			section div:nth-child(4) {
				transform: rotateY(180deg) translateZ(300px);
			}
			
			section div:nth-child(5) {
				transform: rotateY(240deg) translateZ(300px);
			}
			
			section div:nth-child(6) {
				transform: rotateY(300deg) translateZ(300px);
			}
			
			@keyframes rotate{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="big">
			<div class="box3">
				<div class="front">黑马程序员</div>
				<div class="back">我在这里等你</div>
			</div>
		</div>
		
		<ul class="box">
			<li>
				<div class="pink">黑马程序员</div>
				<div class="purple">pink老师等你</div>
			</li>
			<li>
				<div class="pink">黑马程序员</div>
				<div class="purple">pink老师等你</div>
			</li>
			<li>
				<div class="pink">黑马程序员</div>
				<div class="purple">pink老师等你</div>
			</li>
			<li>
				<div class="pink">黑马程序员</div>
				<div class="purple">pink老师等你</div>
			</li>
			<li>
				<div class="pink">黑马程序员</div>
				<div class="purple">pink老师等你</div>
			</li>
		</ul>
		
		
		<!-- 旋转木马案例 -->
		<section>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
	</body>
</html>
